<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>添加员工</title>
		<link rel="stylesheet" href="./layui/css/layui.css">
	</head>
	<body>
		
		<form class = "layui-form" style="margin-top:20px" >
			<div class="layui-form-item">
				<label class="layui-form-label">姓名</label>
				<div class="layui-input-block">
				  <input type="text" name="empName" required  lay-verify="required" placeholder="请输入姓名" autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">年龄</label>
				<div class="layui-input-block">
				  <input type="text" name="empAge" required  lay-verify="required" placeholder="请输入年龄" autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
			    <label class="layui-form-label">性别</label>
			    <div class="layui-input-block">
			      <input type="radio" name="sex" value="男" title="男" checked>
			      <input type="radio" name="sex" value="女" title="女" >
			    </div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">入职日期</label>
				<div class="layui-input-block">
				  <input type="text" id="hiredate" required  lay-verify="required" placeholder="入职时间" autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
			    <label class="layui-form-label">部门</label>
			    <div class="layui-input-block">
			      <select id="department" name="department" lay-verify="required">
			       <!-- <option value=""></option>
			        <option value="0">人事部</option>
			        <option value="1">保卫科</option>
			        <option value="2">总经办</option>
			        <option value="3">技术部</option>
			        <option value="4">销售部</option> -->
			      </select>
			    </div>
			</div>
			
			<div class="layui-form-item">
			    <div class="layui-input-block">
			      <button class="layui-btn" lay-submit lay-filter="addEmp">添加员工</button>
			      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
			    </div>
			</div>
		</form>
		<!-- 引入js-->
		<script src="./layui/layui.js"></script>
		<!-- 引入表单模块 -->
		<script>
			layui.use(['layer','form','laydate'],function(){
				var layer = layui.layer;
				var form = layui.form;
				var laydate  = layui.laydate;
				var $ = layui.jquery;
				
				laydate.render({
					elem:"#hiredate",
					trigger:"click"
				});
				
				$.getJSON("https://localhost:44342/api/system/all-department",function(d){
					if(d.succeeded)
					{
						var list = d.data;
						var str =  "<option value=\"\"></option>";
						for(var i=0;i< list.length;i++)
						{
							str+=`<option value=\"${d.data[i].deptId}\">${d.data[i].deptName}</option>`;
						}
						//console.log(str);
						$("#department").html(str);
						form.render("select");
					}
					else
					{
						layer.msg("加载失败");
					}
					
				});
				
				//提交
				form.on('submit(addEmp)', function(obj){
					console.log("obj=>",obj);
					//给表单赋值
					form.val("addEmp" { //formTest 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
					  ,"empName": obj.field.empName
					  ,"age":obj.field.empAge
					  ,"gender": obj.field.sex
					  ,"hireDate":obj.field.sex
					  ,"deptId":obj.field.sex
					  
					  
					});
					 
					//获取表单区域所有值
					var data1 = form.val("addEmp");
					
					$.post("https://localhost:44342/api/system/new-employee",data1,function(d){
						console.log("d=>>>",d);
						if(d.succeeded)
						{
							var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
							parent.layer.close(index); //再执行关闭
						}
						else
						{
							layer.msg("添加失败");
						}
					},"json");
					return false;
				});
				
				
			});
		</script>
	</body>
</html>